<template>
  <view class="mz-list">
    <!-- <scroll-view
      style="height: 300px;"
      scroll-y="true"
      refresher-enabled="true"
      :refresher-triggered="triggered"
      :refresher-threshold="100"
      refresher-background="lightgreen"
      @refresherpulling="onPulling"
      @refresherrefresh="onRefresh"
      @refresherrestore="onRestore"
      @refresherabort="onAbort"
    >
      <slot></slot>
    </scroll-view>-->
    <scroll-view
      class="scroll-view"
      :scroll-y="true"
      :scroll-top="scrollTopValue"
      :scroll-with-animation="false"
      :refresher-enabled="refresherEnabled&&!this.loading"
      :refresher-triggered="refreshing"
      :lower-threshold="100"
      :refresher-threshold="refresherThreshold"
      refresher-default-style="none"
      refresher-background="#f8f8f8"
      @scroll="onScroll"
      @scrolltolower="onLoading"
      @refresherrefresh="onRefresh"
      @refresherpulling="onPulling"
      @refresherrestore="onRestore"
      @refresherabort="onRabort"
    >
      <uni-load-more v-if="showRefresh" :status="refreshingStatus" :content-text="refreshText"></uni-load-more>
      <slot></slot>
      <uni-load-more :status="status" :content-text="contentText"></uni-load-more>
    </scroll-view>
  </view>
</template>

<script>
export default {
  props: {
    fetchData: {
      type: Function,
      default: () => {}
    },
    pageSize: {
      type: Number,
      default: () => 10
    },
    auto: {
      type: Boolean,
      default() {
        return true;
      }
    },
    refresherEnabled: {
      type: Boolean,
      default() {
        return true;
      }
    }
  },
  data() {
    return {
      pageNum: 1,
      totalNum: 0,
      loading: false, // 下拉状态
      finished: false, // 下拉是否结束
      scrollTopValue: 0,
      scrollTopValueOld: 0,
      refreshing: false, // 设置当前下拉刷新状态，true 表示下拉刷新已经被触发，false 表示下拉刷新未被触发
      refresherThreshold: 45, // 下拉刷新阀值
      list: [],
      time: 0,
      contentText: {
        contentdown: "上拉显示更多",
        contentrefresh: "加载中...",
        contentnomore: "暂无更多"
      },
      refreshText: {
        contentdown: "下拉即可刷新",
        contentrefresh: "刷新中...",
        contentnomore: "释放即可刷新"
      },
      refreshingStatus: "more", // 下拉刷新状态
      showRefresh: false,
      refreshData: {
        start: null,
        end: null
      }
    };
  },
  computed: {
    status() {
      if (this.loading && !this.refreshing) {
        return "loading";
      } else if (this.finished) {
        return "noMore";
      } else {
        return "more";
      }
    }
  },
  watch: {
    showRefresh(val) {
      if (!val) this.refreshData.start = null;
    }
  },
  created() {
    if (this.auto) this.fetchDataByPage();
  },
  methods: {
    onLoading() {
      if (!this.finished) this.handleCurrentChange();
    },
    onRefresh() {
      this.refreshingStatus = "loading";
      this.refreshing = true;
      this.reset();
    },
    onPulling(e) {
      this.showRefresh = true;
      // 判断是否可以刷新了
      if (!this.refreshData.start) {
        this.refreshData.start = e.detail.deltaY;
      } else {
        this.refreshData.end = e.detail.deltaY;
      }
      if (
        this.refreshData.end - this.refreshData.start >=
        this.refresherThreshold
      ) {
        this.refreshingStatus = "noMore";
      } else {
        this.refreshingStatus = "more";
      }
    },
    onRestore() {
      this.refreshing = false;
      this.showRefresh = false;
    },
    onRabort() {
      this.refreshing = false;
      this.showRefresh = false;
    },
    async reset() {
      this.pageNum = 1;
      await this.fetchDataByPage(true);
    },
    async handleCurrentChange() {
      this.pageNum++;
      await this.fetchDataByPage();
    },
    async fetchDataByPage(isReset = false) {
      this.loading = true;
      let pageParams = {
        pageNum: this.pageNum,
        pageSize: this.pageSize
      };
      let data = await this.fetchData(pageParams, this.refreshing || isReset);
      this.refreshing = false;
      if (data) {
        let { count } = data;
        this.totalNum = count;
        if (this.pageNum * this.pageSize >= count) {
          this.finished = true;
        }
      } else {
        this.finished = true;
      }
      if (isReset) {
        uni.stopPullDownRefresh();
      }
      this.loading = false;
    },
    /**
     * 滚动事件
     */
    onScroll(e) {
      this.scrollTopValueOld = e.detail.scrollTop;
      this.$emit("scroll", e);
    },
    /**
     * 滚动到顶部
     */
    scrollTop() {
      this.scrollTopValue = this.scrollTopValueOld;
      this.$nextTick(function() {
        this.scrollTopValue = 0;
      });
    }
  }
};
</script>

<style lang="css" scoped>
.mz-list {
  height: 100%;
}
.scroll-view {
  height: 100%;
  /* position: absolute; */
}
.tip {
  height: 100upx;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #999999;
  font-size: 28upx;
}
</style>
